<template>
    <div style="width: 100%; height: 100%">
        <MainHeader class="slogan-header" ></MainHeader>
        <div class="main-container-content contentBoxs  not">
            <el-row :gutter="10">
                <el-col :xs='24' :sm="24" :md="24" :lg="24" :xl="24">
                    <Commontitle title="教材学习" dec=""></Commontitle>
                </el-col>
            </el-row>
            <el-row :gutter="10">
                <el-col :xs='24' :sm="24" :md="24" :lg="24" :xl="24">
                    <el-form class="formBox formBox1" :model="queryParams" ref="queryForm" size="small" :inline="true"
                        label-width="100px">
                        <el-form-item label="教材名称" prop="nickName">
                            <el-input v-model="queryParams.nickName" placeholder="请输入编号" clearable style="width:240px"
                                @keyup.enter.native="handleQuery" @change="handleQuery" />
                        </el-form-item>
                        <el-form-item label="难度" prop="status" clearable>
                            <el-select v-model="queryParams.status" placeholder="选择状态" clearable filterable
                                style="width: 240px" @change="handleQuery">
                                <el-option v-for="dict in sysUseTypeArr" :key="dict.value" :label="dict.label"
                                    :value="dict.value" />
                            </el-select>
                        </el-form-item>

                        <el-form-item label="类型" prop="nickName">
                            <el-select v-model="queryParams.status" placeholder="选择类型" clearable filterable
                                style="width: 240px" @change="handleQuery">
                                <el-option v-for="dict in sysUseTypeArr" :key="dict.value" :label="dict.label"
                                    :value="dict.value" />
                            </el-select>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" icon="el-icon-search" size="mini"
                                @click="handleQuery">搜索</el-button>
                        </el-form-item>
                    </el-form>
                </el-col>
            </el-row>
            <div class="lists_containers">
                <el-row :gutter="20">
                    <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8" v-for="(listItem, listIndex) in listArr"
                        :key="listIndex">
                        <div class="studentBook">
                            <div class="studentBook_item">
                                <div class="studentBook_item_left">
                                    <div class="studentBook_item_left_imgContainers" @click="onPreview(listItem)">
                                        <el-image class="studentBook_item_left_img" :src="listItem.img">
                                        </el-image>
                                        <!-- <img :src="listItem.img" alt="" class="studentBook_item_left_img" /> -->
                                    </div>

                                </div>
                                <div class="studentBook_item_right" @click="goToDetail(listItem)">
                                    <el-tooltip class="item" effect="dark" :content="listItem.name" placement="left">
                                        <div class="studentBook_item_right_title">
                                            {{ listItem.name }}
                                        </div>
                                    </el-tooltip>
                                    <div class="studentBook_item_right_item">
                                        <div class="studentBook_item_right_item_label">
                                            作者
                                        </div>
                                        <el-tooltip class="item" effect="dark" :content="listItem.auth"
                                            placement="left">
                                            <div class="studentBook_item_right_item_info text_overflow_1">
                                                {{ listItem.auth }}
                                            </div>
                                        </el-tooltip>

                                    </div>
                                    <div class="studentBook_item_right_item">
                                        <div class="studentBook_item_right_item_label">
                                            出版社
                                        </div>
                                        <el-tooltip class="item" effect="dark" :content="listItem.press"
                                            placement="left">
                                            <div class="studentBook_item_right_item_info text_overflow_1">
                                                {{ listItem.press }}
                                            </div>
                                        </el-tooltip>
                                    </div>
                                    <div class="studentBook_item_right_item">
                                        <div class="studentBook_item_right_item_label">
                                            出版年
                                        </div>
                                        <div class="studentBook_item_right_item_info text_overflow_1">
                                            {{ listItem.pressYear }}
                                        </div>
                                    </div>
                                    <div class="studentBook_item_right_item">
                                        <div class="studentBook_item_right_item_label">
                                            定价
                                        </div>
                                        <div class="studentBook_item_right_item_info redColor text_overflow_1">
                                            ￥{{ listItem.price }}
                                        </div>
                                    </div>
                                    <div class="studentBook_item_right_item">
                                        <div class="studentBook_item_right_item_label">
                                            丛书
                                        </div>
                                        <el-tooltip class="item" effect="dark" :content="listItem.series"
                                            placement="left">
                                            <div class="studentBook_item_right_item_info text_overflow_1">
                                                {{ listItem.series }}
                                            </div>
                                        </el-tooltip>
                                    </div>
                                    <div class="studentBook_item_right_item">
                                        <div class="studentBook_item_right_item_label">
                                            ISBN
                                        </div>
                                        <el-tooltip class="item" effect="dark" :content="listItem.Isbn"
                                            placement="left">
                                            <div class="studentBook_item_right_item_info text_overflow_1 ">
                                                {{ listItem.Isbn }}
                                            </div>
                                        </el-tooltip>
                                    </div>
                                    <div class="studentBook_item_right_item">
                                        <div class="studentBook_item_right_item_label">
                                            难度
                                        </div>
                                        <el-tooltip class="item" effect="dark" :content="listItem.difficulty"
                                            placement="left">
                                            <div class="studentBook_item_right_item_info text_overflow_1">
                                                {{ listItem.difficulty }}
                                            </div>
                                        </el-tooltip>

                                    </div>

                                </div>
                            </div>
                        </div>

                    </el-col>
                </el-row>
            </div>
        </div>


        <!-- 放大图片显示 -->
        <div class="hideImgDivConatiners">
            <el-image ref="preview" class="hideImgDiv" :src="Showurl" :preview-src-list="[Showurl]" ></el-image>
        </div>
        <!-- <MainFooter :showFixed="true" backgroundColor="rgba(58, 98, 215, 1)" /> -->
    </div>
</template>

<script>

export default {
    name: 'teachManageList',
    components: {

    },
    data() {
        return {
            Showurl:'',
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                nickName: undefined,
                phonenumber: undefined,
                status: undefined,

            },
            listArr: [
                {
                    img: "http://www.aikeji.top:50005/_uploads/PHOTO/1722579046336.png",
                    name: '病理学（第九版）',
                    auth: '布宏/李一雷',
                    press: '人民卫生出版社',
                    pressYear: '2018年',
                    price: 88,
                    series: '全国高等学校五年制本科临床医学专业第九轮教材',
                    Isbn: '9787117264389',
                    difficulty: '本科生',
                    bookUrl: 'http://www.aikeji.top:50005/_uploads/PHOTO/1722507927312.pdf',
                    status:1,
                },
                {
                    img: "http://www.aikeji.top:50005/_uploads/PHOTO/1722579126185.png",
                    name: '《Robbins基础病理学》第8版英文改编版',
                    auth: '翟启辉/周庚寅',
                    press: '人民卫生出版社',
                    pressYear: '2018年',
                    price: 88,
                    series: '供医学各专业本科生、留学生、长学制、研究生双语教学使用',
                    Isbn: '9787117264389',
                    difficulty: '本科生\研究生\留学生、长学制',
                    bookUrl: '',
                    status:0,
                },
                {
                    img: "http://www.aikeji.top:50005/_uploads/PHOTO/1722579148002.png",
                    name: '高级病理学(研究生用)',
                    auth: '中山大学附属第一医院病理科中山医学院病理学教研室',
                    press: '人民卫生出版社',
                    pressYear: '2018年',
                    price: 88,
                    series: '全国高等学校五年制本科临床医学专业第九轮教材',
                    Isbn: '9787117264389',
                    difficulty: '研究生',
                    bookUrl: '',
                    status:0,
                },

            ],
            sysUseTypeArr: [
                { label: '类型1', value: '0' },
                { label: '类型2', value: '1' }
            ],

        };
    },
    mounted() {
        const { state } = this.$store;


    },
    computed: {
        device() {
            return this.$store.state.device
        }
    },
    methods: {
        onPreview(item) {
            this.Showurl=item.img
          //调用image组件中的大图浏览图片方法
          this.$refs.preview.clickHandler();
        },
        handleQuery() {

        },
        goToDetail(item) {
            if (item.bookUrl) {
                this.$router.push({ path: "/studentLearnDetail", query: { name: item.name, bookUrl: item.bookUrl } });
            } else {
                this.$message.warning("改教材未上架~");
            }

        }

    },
};
</script>

<style scoped lang="scss">
.hideImgDivConatiners{
    width:0px;
    height:0px;
    .hideImgDiv{
        width:0px;
    height:0px;
    }
}
.text_overflow_1 {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;

}

.text_overflow_2 {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;

}

.redColor {
    color: red !important;
}

.lists_containers {
    width: 100%;
    padding:10px;
    padding-bottom:30px;
    height: calc(100% - 94px);
    overflow-y: auto;
    box-sizing: border-box;

    .studentBook {
        padding: 10px;
        margin-bottom: 20px;
        border-radius: 6px;
        box-shadow: 0px 4px 13px 0px rgba(66, 66, 157, 0.6);

        &_item {
            width: 100%;
            display: flex;
            cursor: pointer;
            box-sizing: border-box;
            padding: 10px;

            &_left {
                width: 30%;
                height: 0;
                padding-top: 38%;
                // background: pink;
                position: relative;
                border-radius: 8px;

                &_imgContainers {
                    position: absolute;
                    border-radius: 8px;
                    width: 100%;
                    height: 100%;
                    margin-top: 10px;
                    perspective: 1000px;
                    top: 0;
                    left: 0;
                }

                &_img {
                    width: 100%;
                    height: 100%;
                    display: block;
                    transform: rotateY(20deg) scale(1.1);
                    /* 鼠标悬停时旋转和缩放 */
                    box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.5);
                    /* 增加阴影效果 */
                }
            }

            &_right {
                margin-left: 20px;
                width: calc(70% - 20px);

                &_title {
                    font-size: 16px;
                    font-weight: 700;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    line-height: 24px;
                }

                &_item {
                    margin-top: 8px;
                    font-size: 13px;
                    line-height: 20px;
                    color: #666;
                    display: flex;

                    &_label {
                        width: 60px;
                        color: #999;
                    }

                    &_info {
                        margin-left: 5px;
                        width: calc(100% - 65px);
                        color: #333;
                    }
                }

                &_auth {
                    margin-top: 8px;
                    font-size: 13px;
                    line-height: 20px;
                    color: #666;
                }

                &_dec {
                    margin-top: 8px;
                    font-size: 13px;
                    color: #666;
                    line-height: 20px;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    display: -webkit-box;
                    -webkit-line-clamp: 4;
                    -webkit-box-orient: vertical;
                }
            }
        }
    }
}
</style>
